<!--  -->
<template>
  <div>
      <backHeader title='优惠活动'></backHeader>
      <div class="item" v-for='(item,index) in items' :key='index' @click='openConent(index)'>
          <img :src="item.srcBig" alt="">
          <div class="title" v-if='item.isShow'>
              {{item.title}}
              <div class="content">
                  <p>
                      <img :src="item.src" alt="">
                  </p>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import backHeader from '../../components/backHeader'
export default {
  props: [],
  components: {
    backHeader
  },
  data () {
    return {
      items: [
        { srcBig: 'https://api.dk38dj27.info/upload/2019-04/0_20190430090734.png',
          isShow: false,
          src: 'https://api.dk38dj27.info/upload/2019-04/0_20190430090746.png',
          title: '余额宝'
        },
        { srcBig: 'https://api.dk38dj27.info/upload/2019-03/0_20190322014711.png',
          isShow: false,
          src: 'https://api.dk38dj27.info/upload/2019-09/0_20190917060237.jpg',
          title: '推荐好友奖励'
        }]
    }
  },
  computed: {},
  methods: {
    openConent (index) {
      this.items[index].isShow = !this.items[index].isShow
    }
  }
}

</script>
<style lang='less' scoped>
.item{
    width:calc(100vw - 16px);
    margin:8px 8px 0 8px;
}
.item img{
    width:100%;
}
.title{
    text-align: center;
    font-size:16px;
}
</style>
